<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>well</title>
</head>
<body>
    <img class="sakura-tree-img" src="https://gitee.com/hjbig/vue_shop/raw/master/src/assets/images/DeWatermark.ai_1744005728896.png" alt="樱花树">
    <div id="text-container"></div>
    <script>
        // 生成樱花花瓣
        function createPetal() {
            const petal = document.createElement('div');
            petal.className = 'petal';
            petal.style.left = Math.random() * 100 + 'vw';
            petal.style.animationDuration = Math.random() * 5 + 5 + 's';
            document.body.appendChild(petal);

            setTimeout(() => {
                petal.remove();
            }, 10000);
        }
        setInterval(createPetal, 200);
        const text = "我喜欢你，从见到你的第一眼起，这份喜欢就像这漫天的樱花，越来越浓烈。";
        const textContainer = document.getElementById('text-container');
        let index = 0;

        function typeText() {
            if (index < text.length) {
                textContainer.textContent += text.charAt(index);
                index++;
                setTimeout(typeText, 300);
            }
        }
        typeText();
    </script>
</body>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #ffffff;
    }
    .petal {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: #ffc0cb;
        border-radius: 150px 0 150px 0;
        animation: fall 10s linear infinite;
    }
    @keyframes fall {
        0% {
            transform: translateY(-10%) rotate(0deg);
        }
        100% {
            transform: translateY(100vh) rotate(360deg);
        }
    }
    #text-container {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 24px;
        color: #ff69b4;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        z-index: 3; 
    }
    .sakura-tree-img {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 400px;
        height: auto;
        z-index: 1; 
    }
</style>
</html>